<script  lang="tsx">
import { message } from 'ant-design-vue';
import { Skeleton } from '~/components/skeleton';
import { closeNoticeById, readNotify } from './helpers';
import { TtNotifyType } from './NotificationItem.vue';

export function PlatformNoticeLoading() {
  return (
    <>
      {Array.from({ length: 2 }).map((_, i) => (
        <div class="mb-3 rounded-2 bg-sys-layer-b p4">
          <Skeleton key={i} class="grid gap-2">
            <Skeleton type="text" length={10} />
            <Skeleton type="text" length={25} />
            <Skeleton type="rect" width="auto" height={110} />
            <Skeleton type="text" length={55} />
            <Skeleton type="rect" width="auto" height={1} />
            <Skeleton type="text" length={6} />
          </Skeleton>
        </div>
      ))}
    </>
  );
}
</script>

<script lang="tsx" setup>
const emits = defineEmits<{
  confirm: [];
}>();

// const router = useRouter();
const isAuthed = useAuthed();
function useTableList() {
  const queryParams = reactive<Api.GetParam<typeof apis.apiNoticePlatformLIst>>({});
  const noticeQry = useQuery({
    enabled: isAuthed,
    queryKey: [apis.apiNoticePlatformLIst.id],
    queryFn: () => apis.apiNoticePlatformLIst(queryParams),
  });

  const listData = computed(() => noticeQry.data.value?.list ?? []);

  return {
    listData,
    noticeQry,
    queryParams,
  };
}
const { listData, noticeQry } = useTableList();
const unfoldedIds = ref<Record<string, boolean>>({});

function toggleFoldFn(id: number) {
  unfoldedIds.value[id] = !unfoldedIds.value[id];
}

function openDel(url: string, noticeId: number) {
  if (url.startsWith('#')) {
    history.pushState(null, '', url);
    return;
  }

  readNotify({ type: TtNotifyType.PLATEFORM, id: noticeId, url, callback: () => {
    noticeQry.refetch();
  } });
  if (url)
    emits('confirm');
}

function readAll() {
  listData.value.filter(d => d.is_read === 2).forEach(d => closeNoticeById(d.notice_id, TtNotifyType.PLATEFORM));
  readNotify({ type: TtNotifyType.PLATEFORM, id: 0, callback: () => noticeQry.refetch() });
}

onActivated(noticeQry.refetch);

await noticeQry.suspense();
</script>

<template>
  <TSuspenseView v-bind="buildSvPropsOfQuery(noticeQry, { isEmptyFn: (d) => !d?.list })" outRender>
    <div class="grid mb-15 gap-5">
      <TCard v-for="(item, index) in listData" :key="index">
        <div class="flex-between">
          <div class="mb-1 text-3.5 text-sys-text-body leading-normal">
            {{ $d(item.create_time, 'full') }}
          </div>
          <div v-if="item.is_read === 2" class="h-4.5 flex items-center justify-center rounded-1 bg-green500 px-2 text-3">
            NEW
          </div>
        </div>
        <div>
          <p class="mb-[8px]">
            {{ item?.title }}
          </p>
          <div class="notify__image-block relative">
            <div class="h-27.5">
              <img class="h-full w-full rounded-2 object-cover" :src="item.covers">
            </div>
            <div
              class="notify__text mb-4 mt-3"
              :class="unfoldedIds[item.notice_id] ? 'notify__text--all' : 'notify__text--overflow'"
            >
              {{ item.summary }}
            </div>
            <div class="notify__show-all" :class="unfoldedIds[item.notice_id] ? '!-bottom-5' : 'bottom-0 '" @click="toggleFoldFn(item.notice_id)">
              {{ unfoldedIds[item.notice_id] ? $t('g4Tk1PEua2J_9MzkVlWxz') : $t('wiPpGd0e7VTogE3ifHb') }}
              <i class="ml-2" :class="unfoldedIds[item.notice_id] ? 'i-ep:arrow-up' : 'i-ep:arrow-down' " />
            </div>
          </div>
        </div>
        <div class="flex-between cursor-pointer border-t-(1px slate-700 solid) pt-3" @click="openDel(item.url, item.notice_id)">
          <div v-if="item.url" class="flex items-center text-3.5 text-yellow500">
            {{ $t('lR7XBmlaIGnwUavGdyn6Q') }} <i class="i-ion:ios-arrow-forward ml-1 text-3" />
          </div>
          <div v-show="item.is_read === 2" class="text-3 text-sys-text-body active:text-sys-text-head" @click="readNotify({ id: item.notice_id, type: TtNotifyType.PLATEFORM })">
            {{ $t('xuQjqduVbRbUpVbrPk5fH') }} <i class="i-ri:checkbox-circle-line text-4" />
          </div>
        </div>
      </TCard>
    </div>

    <div
      class="pos-absolute bottom-0 left-0 right-0 mt-auto h-11.5 flex-center flex-none cursor-pointer bg-sys-layer-d text-sys-text-body font-600 active:text-sys-text-head"
      @click="readAll()"
    >
      <span class="text-3.5 leading-normal">{{ $t('xuQjqduVbRbUpVbrPk5fH') }}</span>
      <i class="i-ri:checkbox-circle-line ml-2 text-5" />
    </div>

    <template #empty>
      <TCard>
        <TEmpty />
      </TCard>
    </template>
  </TSuspenseView>
</template>

<style lang="scss" scoped>
.notify__text {
  --uno: 'text-sys-text-body text-3.5 leading-normal';

  overflow: hidden;
  transition: all 0.3s;
}

.notify__text--all {
  margin-bottom: 30px;
  transition: all 0.3s;
}

.notify__text--overflow {
  max-height: 40px;
  transition: all 0.3s;
}

.notify__show-all {
  --uno: 'absolute right-0 gap-1 flex items-center justify-end text-12px text-right w-28 h-4 duration-200 cursor-pointer';

  background: linear-gradient(270deg, #131416 68.52%, rgb(28 37 50 / 0%));
}
</style>
